<template>
  <div>
    <h1>{{ data }}</h1>
    <!-- 添加一个按钮，点击后发送请求 -->
    <button @click="fetchData">获取数据</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Home',
  data() {
    return {
      data: '', // 用来存放后端返回的数据
    };
  },
  methods: {
    // 添加方法来发送请求
    fetchData() {
      // ip改自己服务器的 
      axios.get('http://192.168.232.136:8080/api/data') // 后端接口地址
      // axios.get('http://localhost:8080/api/data') // 后端接口地址
      // axios.get('http://192.168.1.103:8080/api/data') // 后端接口地址


      // axios.get('http://192.168.232.1:5173:8080/api/data') // 后端接口地址
      // axios.get('http://192.168.52.1:5173:8080/api/data') // 后端接口地址
        .then(response => {
          this.data = response.data; // 将返回的数据存储到 data 中
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    }
  }
};
</script>

<style scoped>
/* 这里写样式 */
button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}
</style>
